<template>
	<view class="container">
		<view class="my-balance">
			<uni-card margin="0 10px 10px 10px" subTitle="" title="我的余额：">
				<view style="display: flex;" class="uni-body">缘分值,用于留言、获取联系方式等。
						<view class="tip" @click="showDesc">
							查看说明
						</view>
				</view>
				<view class="">
					<view class="balance">
						<img src="@/assets/img/lovePoint1.png" alt="">
						<view class="text">
							<text>{{balance}}</text>
						</view>
						<view class="topup" @click="gotoTopup">
							充值
						</view>
					</view>
				</view>
			</uni-card>
		</view>
		<view class="detail">
			<uni-card margin="0 10px 10px 10px" title="收支明细">
				<view class="list">
					<view class="item" v-for="item in list">
						<uni-section class="mb-10" :title="item.createTime" type="line"></uni-section>
						<view :class="['transfer', item.changeState === 1?'in':'out']">
							{{item.changeState===1?'+':'-'}}{{item.changeNum}}
						</view>
						<view class="desc">
							途径：{{item.explains}}
						</view>
					</view>
				</view>
			</uni-card>
		</view>
	</view>
</template>


<script>
	import {
		url,
		request,
		login
	} from '@/service/api.js'
	export default {
		data() {
			return {
				balance: '',
				list: []
			};
		},
		mounted() {
			this.init()
		},
		methods: {
			init() {
				request(url.getVirtualCurrency, 'GET').then(res => {
					this.balance = res.data.balance
				})
				request(url.getVirtualList, 'GET', {
					page: 1,
					limit: 1000
				}).then(res => {
					this.list = res.data
				})
			},
			showDesc() {
				uni.navigateTo({
					url: '/pages/yuanfenDesc/yuanfenDesc'
				})
			},
			//去充值
			gotoTopup() {
				uni.navigateTo({
					url: '/pages/membership/membership'
				})
			}
		}
	}
</script>
<style>
	.uni-section .uni-section-header__decoration {
		background-color: #E38132;
	}
</style>
<style lang="less" scoped>
	* {
		box-sizing: border-box;
	}

	.container {
		height: 100%;
		width: 100%;

		/deep/ .uni-card .uni-card__header .uni-card__header-content .uni-card__header-content-title {
			font-size: 16px;
			font-weight: bold;
		}

		/deep/ .uni-card .uni-card__header {
			padding-top: 15px;
		}

		/deep/ .uni-section .uni-section-header {
			padding-left: 0px;
			padding-bottom: 7px;
		}

		/deep/ .uni-section-header__decoration {
			background-color: #E38132;
		}

		.balance {
			position: relative;
			display: flex;
			flex-direction: row;
			align-items: center;
			padding: 20px 0;

			img {
				width: 77px;
				height: 74px;
			}

			text {
				font-size: 63px;
				color: #FC9380;
				font-family: FangSong;
			}

			.text {
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				margin-left: 20px;

			}

			.topup {
				border-radius: 5px;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 13px;
				color: #fff;
				position: absolute;
				right: 0;
				width: 65px;
				height: 23px;
				background-color: #FC9380;
			}
		}

	}

	.item {
		padding-bottom: 10px;
		border-bottom: 1px #EBEEF5 solid;

		.desc {
			font-size: 14px;
			color: #888888;
		}
	}



	.transfer {
		font-size: 17px;
		font-family: 'Times New Roman', Times, serif;
		float: right;
		position: relative;
		bottom: 15px;
	}

	.in {
		color: #E38132;
	}

	.out {
		color: #33B16B;
	}
	.tip{
		    border: 1px solid #999;
		    font-size: 10px;
		    border-radius: 5px;
		    padding: 0 5px;
		    background: #eee;
	}
</style>
